<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表盘</title>
    <style>
        .clock {
            position: relative;
            width: 300px;
            height: 300px;
            border: 4px solid #0df;
            border-radius: 50%;
            background-color: #222;
            margin: 50px auto;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
        }
        .number {
            position: absolute;
            font-size: 20px;
            color: #0df;
            font-weight: bold;
            text-align: center;
        }
        .center {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #0df;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        .hand {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 0% 50%;
            transition: transform 0.1s ease;
        }
        .hour {
            width: 35%;
            height: 4px;
            background-color: #0ff; /* 时针淡青色 */
        }
        .minute {
            width: 45%;
            height: 3px;
            background-color: #0bf; /* 分针淡蓝色 */
        }
        .second {
            width: 50%;
            height: 2px;
            background-color: #f00; /* 秒针红色 */
        }
    </style>
</head>
<body>

<div class="clock" id="clockFace">
    <div class="center"></div>
    <div class="hand hour" id="hourHand"></div>
    <div class="hand minute" id="minuteHand"></div>
    <div class="hand second" id="secondHand"></div>
</div>

<script>
    function createClockFace() {
        const clock = document.getElementById('clockFace');
        const radius = clock.offsetWidth / 2;

        for (let i = 1; i <= 12; i++) {
            const angle = (i * 30 - 90) * (Math.PI / 180);
            const x = radius + radius * 0.8 * Math.cos(angle);
            const y = radius + radius * 0.8 * Math.sin(angle);

            const number = document.createElement('div');
            number.className = 'number';
            number.style.left = `${x - 10}px`;
            number.style.top = `${y - 10}px`;
            number.textContent = i;

            clock.appendChild(number);
        }
    }

    function updateClock() {
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const hourDeg = ((hours % 12) + minutes / 60) * 30 - 90;
        const minuteDeg = (minutes + seconds / 60) * 6 - 90;
        const secondDeg = seconds * 6 - 90;

        document.getElementById('hourHand').style.transform = `rotate(${hourDeg}deg)`;
        document.getElementById('minuteHand').style.transform = `rotate(${minuteDeg}deg)`;
        document.getElementById('secondHand').style.transform = `rotate(${secondDeg}deg)`;
    }

    createClockFace();
    setInterval(updateClock, 1000);
    updateClock();
</script>

</body>
</html>
